<template>
	<view>
		<joMarkdown v-if="item.content" :nodes="formatMarkdown(item.content)"></joMarkdown>
		<u-table v-if="item.menuStyle === 2" font-size="24">
			<u-tr>
				<u-th width="22%">时间</u-th>
				<u-th width="50%">内容</u-th>
				<u-th width="28%">操作</u-th>
			</u-tr>
			<u-tr v-for="(subItem, subIndex) in item.contentList">
				<u-td width="22%" class="td">{{subItem.beginAt}}-{{subItem.endAt}}</u-td>
				<u-td width="50%" class="td">{{subItem.title}}</u-td>
				<u-td width="28%" class="td">
					<view class="link" @click="itemClick(subItem)">执行重点/材料</view>
				</u-td>
			</u-tr>
		</u-table>
		<u-grid v-else-if="item.menuStyle === 1" :col="3" :border="false">
			<u-grid-item v-for="(subItem, subIndex) in item.contentList" :custom-style="customStyle">
				<view class="grid-item" @click="itemClick(subItem)">
					{{subItem.title}}
				</view>
				<!-- <u-button shape="circle" size="mini" @click="itemClick(subItem)">{{subItem.title}}</u-button> -->
			</u-grid-item>
		</u-grid>
		<view v-else>
			<view class="item" v-for="(item, index) in item.contentList" :key="index" @click="contentClick(item)">
				<u-section 
					:title="item.title" 
					:line-color="appTheme.checkColor"
					font-size="26"/>
			</view>
			
<!-- 			<u-grid-item v-for="(subItem, subIndex) in item.contentList" :custom-style="customStyle">
				<u-button shape="circle" size="default" @click="contentClick(subItem)">{{subItem.title}}</u-button>
			</u-grid-item> -->
			
<!-- 			<u-collapse>
				<u-collapse-item :title="contentItem.title" v-for="(contentItem, contentIndex) in item.contentList" :key="contentIndex">
					<week-content :item="contentItem"></week-content>
				</u-collapse-item>
			</u-collapse> -->
		</view>
		<view class="tool">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(toolItem, subIndex) in item.toolList" :custom-style="customStyle">
					<view class="tool-item" @click="toolClick(toolItem)">
						<u-icon v-if="toolItem.type === 'radio'" name="volume" size="60"></u-icon>
						<u-image v-else class="cover" height="100rpx" width="100rpx" :src="wrapToolCover(toolItem)"></u-image>
						<view class="tool-title">{{toolItem.title}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<u-popup v-model="show" mode="bottom" height="80%">
			<view style="padding: 30rpx;">
				<joMarkdown :nodes="markdown"></joMarkdown>
				<view class="tool">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(toolItem, subIndex) in toolList" :custom-style="customStyle">
							<view class="tool-item" @click="toolClick(toolItem)">
								<u-icon v-if="toolItem.type === 'radio'" name="volume" size="60"></u-icon>
								<u-image v-else class="cover" height="100rpx" width="100rpx" :src="wrapToolCover(toolItem)"></u-image>
								<view class="tool-title">{{toolItem.title}}</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="audioShow" mode="bottom" @close="audioClose">
			<view style="padding: 30rpx;">
				<wxy-audio 
					:src="audioSrc"
					:play.sync="audioPlay"
				/>
			</view>
		</u-popup>
		
		<u-popup v-model="videoShow" mode="bottom" @close="videoClose">
			<view style="padding: 30rpx;display: flex;justify-content: center;align-items: center;">
				<video
					class="video"
					id="myVideo"
					:src="videoSrc"
					autoplay="true"
				/>
			</view>
		</u-popup>
		
		<u-action-sheet :list="list" v-model="actionShow" @click="actionClick"></u-action-sheet>
		
		<u-popup v-model="contentShow" mode="bottom" height="90%">
			<view style="padding: 30rpx;">
				<week-content v-if="contentItem" :item="contentItem"></week-content>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import joMarkdown from './jo-markdown/decode.vue';
	import markdownFunc from './jo-markdown/index.js';
	import WeekContent from '@/pages_teach/teach/components/week-content'
	import appMixin from '@/mixins/app.js'
	export default {
		name: 'WeekContent',
		mixins: [appMixin],
		components: {
			joMarkdown,
			WeekContent
		},
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			level: {
				type: Number,
				default: 50
			}
		},
		data() {
			return {
				customStyle: {
					padding: '20rpx 20rpx'
				},
				
				markdown: '',
				toolList: [],
				show: false,
				
				audioShow: false,
				audioPlay: false,
				audioSrc: '',
				
				videoShow: false,
				videoSrc: '',
				
				toolItem: {},
				actionShow: false,
				list: [{
					text: '应用内打开',
				}, {
					text: '系统应用打开'
				}],
				
				contentItem: null,
				contentShow: false,
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			formatMarkdown(markdown) {
				return markdownFunc(markdown, 'markdown');
			},
			itemClick(item) {
				console.log(item);
				this.markdown = this.formatMarkdown(item.content);
				this.toolList = item.toolList;
				this.show = true
			},
			
			wrapToolCover(item) {
				if (item.type === 'image') {
					return item.imgUrl;
				}
				return item.cover;
			},
			
			toolClick(item) {
				console.log(item);
				this.toolItem = item;
				if (item.type === 'pdf') {
					// this.actionShow = true;
					const port = uni.getSystemInfoSync().platform
					if (port === 'android') {
						this.actionShow = true;
					} else {
						this.openDocument(item.imgUrl)
					}
				} else if (item.type === 'radio') {
					this.audioSrc = item.imgUrl;
					this.audioShow = true;
					// this.play = true
				} else if (item.type === 'video') {
					// #ifdef APP
						this.$u.route({
							url: 'pages_base/common/player/player',
							params: {
								url: item.imgUrl,
								title: item.title,
								update: 'false'
							}
						})
					// #endif
					// #ifdef MP
						this.videoSrc = item.imgUrl;
						this.videoShow = true
					// #endif
				} else if (item.type === 'image') {
					const resourceUrls = [item.imgUrl]
					uni.previewImage({
						urls: resourceUrls,
						current: 0,
					});
				}
			},
			
			openDocument(url) {
				uni.showLoading({title: '正在加载文件'})
				uni.downloadFile({//下载对应文件
				  url: url,
				  success: function (res) {
					console.log(res);
					var filePath = res.tempFilePath;//文件路径
					uni.openDocument({
					  filePath: filePath,//装载对应文件的路径
					  fileType: 'pdf',//指定打开的文件类型
					  success: function (res) {
						console.log("打开成功");
					  },
					  fail: function (res) {
						console.log(res);
					  }
					})
			
				  },
				  fail: function (res) {
					console.log(res);
					this.$u.toast('加载失败')
				  },
				  complete() {
				  	uni.hideLoading()
				  }
				})
			},
			
			audioClose() {
				this.audioPlay = false
			},
			
			videoClose() {
				this.videoContext.stop()
			},
			
			isEmpty(beginAt) {
				return this.$u.test.isEmpty(beginAt)
			},
			
			actionClick(index) {
				const item = this.toolItem;
				console.log(item);
				// const url = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${item.imgUrl}`;
				const url = item.imgUrl;
				console.log(url);
				if (index === 0) {
					// https://saas.res.dotflat.cn/teach/file/course/common/admin_1651136021332.pdf
					this.$u.route({
						url: '/pages_base/common/pdf-page',
						params: {
							url: url
						}
					})
				} else {
					this.openDocument(item.imgUrl)
				}
			},
			
			contentClick(item) {
				this.contentItem = item;
				this.contentShow = true;
			}
		},
	}
</script>

<style lang="scss">
	.td {
		height: 100rpx;
		overflow: hidden;
		.link{
			text-decoration:underline;
		}
	}
	.tool{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		
		.tool-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.cover{
				height: 100rpx;
				width: 100rpx;
			}
			
			.tool-title{
				margin-top: 10rpx;
				font-size: 20rpx;
				height: 60rpx;
				color: $app-font-desc-color;
			}
		}
	}

	.video {
		align-self: center;
		width: 640rpx;
		height: 360rpx;
	}
	
	.item{
		padding: 15rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 15rpx;
	}
	
	.grid-item{
		padding: 10rpx;
		border-radius: 10rpx;
		border-style:solid;
		border-color: $app-font-desc-color;
		border-width: 2rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
	}
</style>
